<!--
  Copyright (c) 2017-present, Facebook, Inc.
  All rights reserved.

  This source code is licensed under the license found in the
  LICENSE file in the root directory of this source tree.
-->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="full-screen" content="yes"/>
  <meta name="screen-orientation" content="portrait"/>
  <meta name="viewport" content="user-scalable=no"/>
  <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- build:js -->
  <script src="https://www.facebook.com/assets.php/en_US/fbinstant.latest.js"></script>
  <!-- endbuild -->
  <script type="text/javascript">

    const assets = [
      'img/asset1.png',
      'img/asset2.png',
      'img/asset3.png',
      'img/asset4.png'
    ];

    window.onload = function() {
      $('#info-section').hide();

      // When the window loads, start to initialize the SDK
      FBInstant.initializeAsync().then(function() {

        // We can start to load assets
        for (let i in assets) {
          // When preloading assets, make sure to report the progress
          FBInstant.setLoadingProgress(i / assets.length * 100);
        }

        // Now that assets are loaded, call startGameAsync
        FBInstant.startGameAsync().then(onStart);
      });
    };

    function onStart() {
      // This is called when the user has tapped Play
      // Information from the SDK can now be accessed
      $('#photo').attr('src', FBInstant.player.getPhoto());
      $('#player-name').html(FBInstant.player.getName());
      $('#player-id').html(FBInstant.player.getID());
      $('#context-type').html(FBInstant.context.getType());
      try{
        $('#entrypointdata').html(JSON.stringify(FBInstant.getEntryPointData()));
      }catch(e){
        console.log(e);
      }
      $('#info-section').show();
    }
  </script>

  <header>
    <h1>Instant Games Demos</h1>
    <h2>Hello World!</h2>
  </header>

  <section id="info-section">
    <p>If you can see this, then FBInstant initialized properly and the game has started!</p>

    <img id="photo" class="profile_picture"/>

    <table>
      <tr>
        <th>Player Name</th>
        <td id="player-name"></td>
      </tr>
      <tr>
        <th>Player ID</th>
        <td id="player-id"></td>
      </tr>
      <tr>
        <th>Context Type</th>
        <td id="context-type"></td>
      </tr>
      <tr>
        <th>Entrypoint Data</th>
        <td id="entrypointdata"></td>
      </tr>
    </table>
  </section>
</body>
</html>
